<template>
  <div>
    <van-nav-bar title="影院" ref="navbar" @click-left="handleLeft"
      @click-right="handleRight">
      <template #left>
        {{$store.state.cityName}}<van-icon name="arrow-down" />
      </template>
      <template #right>
        <van-icon name="search" size="28" color="black"/>
      </template>
    </van-nav-bar>
    <div class="box" :style="{
        height:height
      }">
        <ul>
          <!-- @click="handleChoiceCinema(data)" -->
          <li v-for="data in cinemaList" :key="data.cinemaId" @click='handleChoiceCinema(data)'>
            <div class="left" >
              <div class="cinema_name">{{ data.name }}</div>
              <div class="cinema_text">{{ data.address }}</div>
            </div>
            <div class="right cinema_name" >
              <div style="color: red">¥{{ data.lowPrice / 100 }}起</div>
            </div>
          </li>
        </ul>
    </div>
  </div>
</template>
<script>

import BetterScroll from 'better-scroll'
import { mapState, mapActions, mapMutations } from 'vuex'
export default {

  data () {
    return {

      height: '0px'

    }
  },
  computed: {
    ...mapState(['cinemaList', 'cityId', 'cityName'])
  },
  mounted () {
    this.$store.commit('show')
    this.height = document.documentElement.clientHeight -
    document.documentElement.querySelector('footer').offsetHeight - this.$refs.navbar.$el.offsetHeight + 'px'

    if (this.cinemaList.length === 0) {
      this.getCinemaData(this.cityId).then(res => {
        // this.$nextTick(() => {
        //   new BetterScroll('.box', {
        //     scrollbar: {
        //       fade: true,
        //       click:true,
        //       tap:true
        //     }
        //   })
        // })
      })
    } else {
      // this.$nextTick(() => {
      //   new BetterScroll('.box', {
      //     scrollbar: {
      //       fade: true,
      //       click:true,
      //       tap:true
      //     }
      //   })
      // })
    }
    //   http({

  //     url: `/gateway?cityId=${this.$store.state.cityId}&ticketFlag=1&k=3548229`,
  //     headers: {
  //       'X-Host': ' mall.film-ticket.cinema.list '
  //     }
  //   }).then((res) => {
  //     this.cinemaList = res.data.data.cinemas
  //     this.$nextTick(() => {
  //       new BetterScroll('.box', {
  //         scrollbar: {
  //           fade: true
  //         }
  //       })
  //     })
  //   })
  },
  methods: {
    ...mapActions(['getCinemaData']),
    ...mapMutations(['clearCinema']),
    handleLeft () {

      this.$router.push('/city')
      this.clearCinema()
    },
    handleRight () {
      this.$router.push('/cinemas/search')
    },
    handleChoiceCinema(_data){
      this.$router.push(`/cinemaDetail/${_data.cinemaId}`)

    }
  }
}
</script>
<style lang="scss" scoped>
.van-nav-bar{
  position: fixed;
    width: 100%;
}
.box{
  height: 36.6667rem;
  padding-top:46px;
  // overflow: hidden;
  position: relative;
}
li {
  padding: 0.8333rem;
  display: flex;
  justify-content: space-between;
}
.left {
  width: 11.777778rem;
}
.cinema_text {
  color: #797d82;
  font-size: 12px;
  margin-top: 5px;
  overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
}
.cinema_name {
  font-size: 15px;
}

</style>
